<template>
    <div class="article-data">
        <article v-for="(item, i) in lists" :key="i" class="items">
            <div class="user">
                <Avatar shape="square" :src="item.user.avatar" />
                <div class="name">
                    <a>{{ item.user.name }}</a>
                    <p>@{{ isNoNull(item.user.description) ? item.user.description : '这个人很懒,没留下什么!' }}</p>
                </div>
                <TimeAgo class="time" :time="item.createTime" />
            </div>
            <NuxtLink :to="{ name: 'post-id', params: { id: item.id } }">
                <h2 class="title">{{ item.title }}</h2>
            </NuxtLink>
            <div class="description">
                {{ isNoNull(item.description) ? item.description : '暂无简介' }}
            </div>
            <!-- 视频 -->
            <div v-if="equal(item.type, 2)" class="video">
                <NuxtLink :to="{ name: 'post-id', params: { id: item.id } }">
                    <ImageLoading class="cover" :url="item.cover" />
                    <div class="overlay">
                        <i class="ri-play-fill" />
                    </div>
                </NuxtLink>
            </div>
            <!-- 图文 -->
            <div v-else class="article">
                <NuxtLink :to="{ name: 'post-id', params: { id: item.id } }">
                    <ImageLoading v-if="item.cover" class="cover" :url="item.cover" />
                    <ImageLoading v-else class="cover" :url="randomImgs.baseURL + i" />
                    <div class="overlay" />
                </NuxtLink>
            </div>
            <!-- 底部 -->
            <div class="foot">
                <div class="item">
                    <i class="ri-heart-3-line" />
                    <span>{{ item.articleCount.likes }}</span>
                </div>
                <div class="item">
                    <i class="ri-chat-3-line" />
                    <span>{{ item.articleCount.comments }}</span>
                </div>
                <div class="item">
                    <i class="ri-eye-line" />
                    <span>{{ item.articleCount.looks }}</span>
                </div>
            </div>
        </article>
    </div>
</template>
<script setup lang="ts">
import './app.less'
import { isNoNull, equal } from 'usuuu'

/**
 * props
 */
const props = withDefaults( 
    defineProps<{
        data: ArticleVo[]
    }>(), {}
)
const lists = ref(props.data)
</script>